<template>
  <l-select-panel
    style="padding:8px;padding-left:0;"
    ref="selectPanel"
    v-model="value"
    :columns="columns"
    :isPage="false"
    :loadSelectTable="loadSelectTable"
    model="client"
    valueKey="value"
    @change="handleChange"
  >
  </l-select-panel>
</template>

<script>
export default {
  props:{
    columns:{
      type:Array,
      default:()=>[]
    },
    type:Number,
    loadData:Function
  },
  data() {
    return {
      value: "",
      selectList: {},
      list:[]
    };
  },
  computed: {},
  methods: {
    initForm(){
      this.tableLoadData();
    },
    tableLoadData() {
      this.$refs.selectPanel.init();
    },
    async loadSelectTable() {
      let data = await this.loadData();
      this.list = data;
      return data;
    },

    handleChange(vlist) {
      const map = {};
      vlist.forEach((t) => {
        map[t] = true;
      });

      const addVList = vlist.filter((t) => !this.selectList[t]);
      const addList = [];
      this.list.forEach((t) => {
        if (addVList.indexOf(t.value) > -1) {
          addList.push({
            f_UserId: t.value,
            f_Type: this.type,
            f_Name: t.label,
            f_Category: 1,
          });
        }
      });
      this.selectList = map;
      this.$emit("change", { values: vlist, addList, type: this.type });
    },

    setForm(value) {
      this.value = String(value);

      const map={}
      value.forEach(t=>{
        map[t] = true;
      })
      this.selectList = map;

      this.tableLoadData();
    },

    resetForm() {
      this.clear();
    },

    clear(){
      this.$refs.selectPanel.handleClear();
    },
    delete(id){
      this.$refs.selectPanel.toggleRowSelection([id],false);
    },
  },
};
</script>
